<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="author" content="林镭特">
    <title></title>
    <style>
        body{
            background-color: lightskyblue;
        }
        main{
            width: 900px;
            margin: 0 auto;
            text-align: center;
        }
        section{
            display: flex;
            width: 900px;
            margin: 0 auto;
            justify-content: space-between;
            text-align: center;
        }
    </style>
</head>
<body>
    
         <main>


         </main>
         <section>

         </section>
<div class=""></div>
<p></p>

    <!-- <script src="js/weather.js"></script> -->
<script>
//      var xhr = new XMLHttpRequest();
// xhr.onreadystatechange = function(){
//     if (xhr.readyState == 4) {
        
//         let data = JSON.parse(xhr.responseText);
//         console.log(data);
//     }
// }
// xhr.open('POST', 'http://wthrcdn.etouch.cn/weather_mini?citykey=101180101');
// xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
// xhr.send();



var xhr = new XMLHttpRequest();
var data={}
// 2、监听请求状态的变化
xhr.onreadystatechange = function(){
    if (xhr.readyState == 4) {
        console.log(xhr.responseText);
        data = JSON.parse(xhr.responseText);
        data=data.data
        var today=data.forecast[0]
        // data = xhr.responseText;
        document.querySelector('main').innerHTML=(
        `
        <h2>${data.city}</h2>
        <div class="today">
            <p > ${today.date}</p>
            <p>当前温度：${data.wendu}摄氏度</p>
            <p>温度：${today.low}-${today.high}</p>
            <p>风向：${today.fengxiang}</p>
            <p>天气：${today.type}</p>
            <p>介绍：${data.ganmao}</p>
        </div>
        `)
        let week=``
        for(var i = 1; i <data.forecast.length ; i++){
            var  wea=data.forecast[i]
            var content=`
            <div class="next">
            <p > ${wea.date}</p>
            <p>温度：${wea.low}-${wea.high}</p>
            <p>风向：${wea.fengxiang}</p>
            <p>天气：${wea.type}</p>
        </div>
            `
            week += content
        }

        document.querySelector('section').innerHTML=week

        console.log(data);
    }
}


xhr.open('GET', 'http://wthrcdn.etouch.cn/weather_mini?citykey=101180101');


// 4、发送请求
xhr.send();


</script>
</body>
</html>